<template>
	<view class="main bgfff">
		<gui-a-header :title="title"></gui-a-header>
		<view class="warp">
			<view class="card">
				<view class="title-img flex-ac">
					<image src="../../static/mine/zhiweijiashao.png" mode="widthFix" style="height: auto;"></image>
					<text class="f28 gui-bold">岗位信息</text>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						岗位名称
					</view>
					<view class="val c333">
						<input class="val_input" type="text" placeholder="请输入岗位名称" v-model="form.postName" />
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						职位行业
					</view>
					<view class="val c333 gui-flex1 qoverDot">
						<!-- <picker @change="professionPickerChange" :value="professionIndex" :range="professionArr"
							range-key="dictLabel">
							<view class="val gui-flex gui-align-items-center c333">
								<view class="uni-input">{{professionArr[professionIndex].dictLabel}}</view>
								<text class="gui-icons c999">&#xe601;</text>
							</view>
						</picker> -->
						<picker mode="multiSelector" @columnchange="professionPickerChange" :value="professionIndex"
							:range="professionArr" range-key="label">
							<view class="uni-input" style="text-align: right;">
								{{professionArr[0][professionIndex[0]].label}}，{{professionArr[1][professionIndex[1]].label}}
							</view>
						</picker>
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						招聘人数
					</view>
					<view class="val c333">
						<input class="val_input" type="text" placeholder="请输入招聘人数" v-model="form.recruitNum" />
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						薪资水平
					</view>
					<view class="val c333">
						<picker @change="postMoneyPickerChange" :value="postMoneyIndex" :range="postMoneyArr"
							range-key="dictLabel">
							<view class="val gui-flex gui-align-items-center c333">
								<view class="uni-input">{{postMoneyArr[postMoneyIndex].dictLabel}}</view>
								<text class="gui-icons c999">&#xe601;</text>
							</view>
						</picker>
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						工作区域
					</view>
					<view class="val c333">
						<picker @change="workAreaPickerChange" :value="workAreaIndex" :range="workAreaArr"
							range-key="dictLabel">
							<view class="val gui-flex gui-align-items-center c333">
								<view class="uni-input">{{workAreaArr[workAreaIndex].dictLabel}}</view>
								<text class="gui-icons c999">&#xe601;</text>
							</view>
						</picker>
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						职位有效期
					</view>
					<view class="val c333">
						<picker mode="date" :value="form.endTime" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input" v-if="form.endTime">{{form.endTime}}</view>
							<view class="uni-input c999" v-else>请选择职位有效期</view>
						</picker>
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						详细地址
					</view>
					<view class="val c333">
						<input class="val_input" type="text" placeholder="请输入详细地址" v-model="form.addressInfo" />
					</view>
				</view>
			</view>
			<view class="zw_10"></view>
			<view class="card">
				<view class="title-img flex-ac">
					<image src="../../static/mine/zhiweiyaoqiu.png" mode="widthFix" style="height: auto;"></image>
					<text class="f28 gui-bold">职位介绍</text>
				</view>
				<view class="border textarea_box">
					<textarea name="name5" placeholder="说点什么..." v-model="form.workInfo" :maxlength="400"
						class="gui-textarea gui-border-box" />
					<text class="max_len c999 f18">{{form.workInfo.length}}/400</text>
				</view>
			</view>
			<view class="zw_10"></view>
			<view class="card">
				<view class="title-img flex-ac">
					<image src="../../static/image/userInfo.png" mode="widthFix" style="height: auto;"></image>
					<text class="f28 gui-bold">职位要求</text>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						年龄
					</view>
					<view class="val c333">
						<!-- <input class="val_input" type="text" placeholder="年龄" v-model="form.age" /> -->
						<picker @change="agePickerChange" :value="ageIndex" :range="ageArr" range-key="dictLabel">
							<view class="val gui-flex gui-align-items-center c333">
								<view class="uni-input">{{ageArr[ageIndex].dictLabel}}</view>
								<text class="gui-icons c999">&#xe601;</text>
							</view>
						</picker>
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						性别
					</view>
					<view class="val c333">
						<!-- <input class="val_input" type="text" placeholder="请输入性别" v-model="form.sex" /> -->
						<picker @change="sexPickerChange" :value="sexIndex" :range="sexArr" range-key="dictLabel">
							<view class="val gui-flex gui-align-items-center c333">
								<view class="uni-input">{{sexArr[sexIndex].dictLabel}}</view>
								<text class="gui-icons c999">&#xe601;</text>
							</view>
						</picker>
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						学历要求
					</view>
					<view class="val c333">
						<picker @change="educationPickerChange" :value="educationIndex" :range="educationArr"
							range-key="dictLabel">
							<view class="val gui-flex gui-align-items-center c333">
								<view class="uni-input">{{educationArr[educationIndex].dictLabel}}</view>
								<text class="gui-icons c999">&#xe601;</text>
							</view>
						</picker>
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						技能要求
					</view>
					<view class="val c333">
						<input class="val_input" type="text" placeholder="请输入技能要求" v-model="form.skill" />
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						工作经验
					</view>
					<view class="val c333">
						<picker @change="workPickerChange" :value="workIndex" :range="workArr" range-key="dictLabel">
							<view class="val gui-flex gui-align-items-center c333">
								<view class="uni-input">{{workArr[workIndex].dictLabel}}</view>
								<text class="gui-icons c999">&#xe601;</text>
							</view>
						</picker>
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						残疾类别
					</view>
					<view class="val c333">
						<picker @change="physicalTypePickerChange" :value="physicalTypeIndex" :range="physicalTypeArr"
							range-key="dictLabel">
							<view class="val gui-flex gui-align-items-center c333">
								<view class="uni-input">{{physicalTypeArr[physicalTypeIndex].dictLabel}}</view>
								<text class="gui-icons c999">&#xe601;</text>
							</view>
						</picker>
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						残疾等级
					</view>
					<view class="val c333">
						<view class="val gui-flex gui-align-items-center c333" @click="disabilityClassOpen">
							<view class="uni-input" v-if="form.physicalGrade">{{form.physicalGrade}}</view>
							<view class="uni-input" v-else>请选择</view>
							<text class="gui-icons c999">&#xe601;</text>
						</view>

						<!-- <picker @change="physicalGradePickerChange" :value="physicalGradeIndex"
							:range="physicalGradeArr" range-key="dictLabel">
							<view class="val gui-flex gui-align-items-center c333">
								<view class="uni-input">{{physicalGradeArr[physicalGradeIndex].dictLabel}}</view>
								<text class="gui-icons c999">&#xe601;</text>
							</view>
						</picker> -->
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						是否缴纳社保
					</view>
					<view class="val c333">
						<picker @change="socialSecurityPickerChange" :value="socialSecurityIndex"
							:range="socialSecurityArr" range-key="dictLabel">
							<view class="val gui-flex gui-align-items-center c333">
								<view class="uni-input">{{socialSecurityArr[socialSecurityIndex].dictLabel}}</view>
								<text class="gui-icons c999">&#xe601;</text>
							</view>
						</picker>
					</view>
				</view>
				<!-- <view class="row gui-flex gui-space-between gui-align-items-center f26" >
					<view class="label c333">
						肢体残疾部位
					</view>
					<view class="val c333">
						<input class="val_input" type="text" v-model="cvForm.physicalPart" placeholder="请输入肢体残疾部位" />
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26" v-if="physicalTypeArr[physicalTypeIndex].dictCode == 62">
					<view class="label c333">
						多重残疾情况
					</view>
					<view class="val c333">
						<input class="val_input" type="text" v-model="cvForm.physicalTypeVar" placeholder="请输入多重残疾情况" />
					</view>
				</view> -->
				<view class="border textarea_box mt30" v-if="physicalTypeArr[physicalTypeIndex].dictCode == 59">
					<textarea name="name5" placeholder="请输入肢体残疾部位" :maxlength="400" v-model="form.physicalContext"
						class="gui-textarea gui-border-box" />
					<text class="max_len c999 f18">{{form.physicalContext.length}}/400</text>
				</view>
				<view class="border textarea_box mt30" v-if="physicalTypeArr[physicalTypeIndex].dictCode == 62">
					<textarea name="name5" placeholder="多重残疾情况" :maxlength="400" v-model="form.physicalTypeVar"
						class="gui-textarea gui-border-box" />
					<text class="max_len c999 f18">{{form.physicalTypeVar.length}}/400</text>
				</view>
			</view>
			<view class="zw_10"></view>
			<view class="card">
				<view class="title-img flex-ac">
					<image src="../../static/mine/zhiweiyaoqiu.png" mode="widthFix" style="height: auto;"></image>
					<text class="f28 gui-bold">福利待遇</text>
				</view>
				<view class="border textarea_box">
					<textarea name="name5" placeholder="说点什么..." v-model="form.welfareContext" :maxlength="400"
						class="gui-textarea gui-border-box" />
					<text class="max_len c999 f18">{{form.welfareContext.length}}/400</text>
				</view>
			</view>
			<view style="height: 100rpx;">

			</view>
			<view class="btn_warp gui-flex">
				<view class="btn line_right" @tap="realDraftSumbit">
					暂时保存
				</view>
				<view class="btn gui-bold" @tap="realSumbit">
					确定发布
				</view>
			</view>
		</view>
		<Disability-class :items="physicalGradeArr" @confirm="physicalGradePickerChange2"
			ref="disabilityClassRef"></Disability-class>
	</view>
</template>

<script setup>
	import graceChecker from "@/Grace6/js/checker.js"
	import {
		ref,
		reactive,
		inject,
		computed
	} from 'vue'
	// import {
	// 	jobType,
	// 	disabilityLevel
	// } from "@/utils/picker.js";
	import {
		getSysDictTypeList,
		selectOneGradeList
	} from '@/api/config.js';
	import {
		savePostInfoService,
		saveCaoGaoPostInfoService,
		selectPostByOneInfo,
		updatePostInfoService
	} from '@/api/company.js';
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'

	import disabilityClass from '@/components/Disability-class/Disability-class.vue'
	const disabilityClassRef = ref(null)
	let timer;
	const $u = reactive(inject('$u'))
	const postId = ref('')
	const title = ref('岗位发布')
	const isClick = ref(true)
	onLoad((option) => {
		if (option.postId) {
			postId.value = option.postId;
			title.value = '编辑岗位'
		} else {
			title.value = '岗位发布'
		}
		loadZd();
	})
	
	const getDate = (type) => {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}-${day}`;
	}
	
	let startDate = computed(()=>{
	    return getDate('start');
	})
	
	let endDate = computed(()=>{
	    return getDate('end');
	})
	
	const bindDateChange = (e) => {
		form.value.endTime = e.detail.value
	}

	onUnload(() => {
		if (timer) clearTimeout(timer);
	})

	const form = ref({
		industryId: '', // 行业id
		postName: '', // 岗位名称
		industry: '', // 职位行业
		recruitNum: '', // 招聘人数
		postMoney: '', // 薪资水平
		workArea: '', // 工作区域
		addressInfo: '', // 详细地址
		workInfo: '', // 职位介绍
		age: '', // 年龄
		sex: '', // 性别
		education: '', // 学历要求
		skill: '', // 技能要求
		work: '', // 工作经验
		physicalGrade: '', // 残疾等级
		physicalContext: '', // 残疾部位
		welfareContext: '' ,// 福利待遇
		endTime: ''// 职位有效期
	})

	const areaData = ref([])
	const jobIndex = ref(0)
	const levelIndex = ref(0)

	const professionData = ref([]);
	const professionArr = ref([
		[{
			value: 0,
			label: '请选择'
		}],
		[{
			value: 1,
			label: '请选择'
		}]
	])
	const professionIndex = ref([0, 0])
	const professionPickerChange = (e) => {
		console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
		professionIndex.value[e.detail.column] = e.detail.value
		switch (e.detail.column) {
			case 0: //拖动第1列
				let childList = professionData.value[e.detail.value].listGrade.map(e => {
					return {
						value: e.id,
						label: e.twoName
					}
				})
				professionArr.value[1] = childList;
				professionIndex.value.splice(1, 1, 0)
				form.value.industry = professionArr.value[1][0].label;
				form.value.industryId = professionArr.value[1][0].value;
				break
			case 1: //拖动第1列
				form.value.industryId = professionArr.value[1][e.detail.value].value;
				form.value.industry = professionArr.value[1][e.detail.value].label;
				break
		}
		console.log(form.value.industry);
	}

	const postMoneyArr = ref([{
		dictLabel: '请选择',
		dictValue: ''
	}])
	const postMoneyIndex = ref(0)
	const postMoneyPickerChange = (e) => {
		postMoneyIndex.value = e.detail.value;
		form.value.postMoney = postMoneyArr.value[e.detail.value].dictValue
	}

	const workAreaArr = ref([{
		dictLabel: '请选择',
		dictValue: ''
	}])
	const workAreaIndex = ref(0)
	const workAreaPickerChange = (e) => {
		workAreaIndex.value = e.detail.value;
		form.value.workArea = workAreaArr.value[e.detail.value].dictValue
	}


	const ageArr = ref([{
		dictLabel: '请选择',
		dictValue: ''
	}])
	const ageIndex = ref(0)
	const agePickerChange = (e) => {
		ageIndex.value = e.detail.value;
		form.value.age = ageArr.value[e.detail.value].dictValue
	}

	const sexArr = ref([{
		dictLabel: '请选择',
		dictValue: ''
	}])
	const sexIndex = ref(0)
	const sexPickerChange = (e) => {
		sexIndex.value = e.detail.value;
		form.value.sex = sexArr.value[e.detail.value].dictValue
	}

	const educationArr = ref([{
		dictLabel: '请选择',
		dictValue: ''
	}])
	const educationIndex = ref(0)
	const educationPickerChange = (e) => {
		educationIndex.value = e.detail.value;
		form.value.education = educationArr.value[e.detail.value].dictValue
	}

	const workArr = ref([{
		dictLabel: '请选择',
		dictValue: ''
	}])
	const workIndex = ref(0)
	const workPickerChange = (e) => {
		workIndex.value = e.detail.value;
		form.value.work = workArr.value[e.detail.value].dictValue
	}

	const physicalGradeArr = ref([{
		dictLabel: '请选择',
		dictValue: ''
	}])
	const physicalGradeIndex = ref(0)
	const physicalGradePickerChange = (e) => {
		physicalGradeIndex.value = e.detail.value;
		form.value.physicalGrade = physicalGradeArr.value[e.detail.value].dictValue
	}

	const physicalTypeArr = ref([{
		dictLabel: '请选择',
		dictValue: ''
	}])
	const physicalTypeIndex = ref(0)
	const physicalTypePickerChange = (e) => {
		physicalTypeIndex.value = e.detail.value;
		form.value.physicalType = physicalTypeArr.value[e.detail.value].dictValue
	}
	
	const socialSecurityArr = ref([{
		dictLabel: '请选择',
		dictValue: ''
	}])
	const socialSecurityIndex = ref(0)
	const socialSecurityPickerChange = (e) => {
		socialSecurityIndex.value = e.detail.value;
		form.value.socialSecurity = socialSecurityArr.value[e.detail.value].dictValue
	}

	const disabilityClassOpen = () => {
		disabilityClassRef.value.open();
	}

	const physicalGradePickerChange2 = (res) => {
		form.value.physicalGrade = res.data.join(',')
	}

	const loadZd = () => {
		selectOneGradeList().then(res => {
			professionData.value = res.data;
			console.log(professionData.value);
			let list = res.data.map(e => {
				return {
					value: e.id,
					label: e.oneName
				}
			})
			let childList = professionData.value[0].listGrade.map(e => {
				return {
					value: e.id,
					label: e.twoName
				}
			})
			professionArr.value[0] = list;
			professionArr.value[1] = childList;

			getSysDictTypeList({
				dictType: ''
			}).then(res => {
				let result = res.data;
				postMoneyArr.value = [];
				workAreaArr.value = [];
				ageArr.value = [];
				sexArr.value = [];
				educationArr.value = [];
				workArr.value = [];
				physicalGradeArr.value = [];
				physicalTypeArr.value = [];
				socialSecurityArr.value = [];

				result.forEach(item => {
					if (item.dictType == 'com_salary') {
						postMoneyArr.value.push(item)
					}
					if (item.dictType == 'com_work_area') {
						workAreaArr.value.push(item)
					}
					if (item.dictType == 'com_age') {
						ageArr.value.push(item)
					}
					if (item.dictType == 'sys_user_sex') {
						sexArr.value.push(item)
					}
					if (item.dictType == 'com_school') {
						educationArr.value.push(item)
					}
					if (item.dictType == 'com_work_time') {
						workArr.value.push(item)
					}
					if (item.dictType == 'com_disability_level') {
						physicalGradeArr.value.push(item)
					}
					if (item.dictType == 'com_physical_type') {
						physicalTypeArr.value.push(item)
					}
					if (item.dictType == 'com_sh_shebao') {
						socialSecurityArr.value.push(item)
					}
				})
				if (postId.value) {
					console.log("============来了");
					loadEdit();
				} else {
					// form.value.industry = professionArr.value[0].dictValue;
					form.value.postMoney = postMoneyArr.value[0].dictValue;
					form.value.workArea = workAreaArr.value[0].dictValue;
					form.value.age = ageArr.value[0].dictValue;
					form.value.sex = sexArr.value[0].dictValue;
					form.value.education = educationArr.value[0].dictValue;
					form.value.work = workArr.value[0].dictValue;
					form.value.physicalType = physicalTypeArr.value[0].dictValue;
					form.value.socialSecurity = socialSecurityArr.value[0].dictValue;
					/* form.value.physicalGrade = physicalGradeArr.value[0].dictValue; */
				}
			})
		})
	}

	const loadEdit = () => {
		selectPostByOneInfo({
			id: postId.value
		}).then(res => {
			if (res.code == 200) {
				let result = res.data;
				form.value = result;
				console.log(form.value);
				postMoneyArr.value.forEach((item, index) => {
					if (item.dictValue == result.postMoney) postMoneyIndex.value = index;
				})
				workAreaArr.value.forEach((item, index) => {
					if (item.dictValue == result.workArea) workAreaIndex.value = index;
				})
				ageArr.value.forEach((item, index) => {
					if (item.dictValue == result.age) ageIndex.value = index;
				})
				sexArr.value.forEach((item, index) => {
					if (item.dictValue == result.sex) sexIndex.value = index;
				})
				educationArr.value.forEach((item, index) => {
					if (item.dictValue == result.education) educationIndex.value = index;
				})
				workArr.value.forEach((item, index) => {
					if (item.dictValue == result.work) workIndex.value = index;
				})
				physicalTypeArr.value.forEach((item, index) => {
					if (item.dictValue == result.physicalType) physicalTypeIndex.value = index;
				})
				socialSecurityArr.value.forEach((item, index) => {
					if (item.dictValue == result.socialSecurity) socialSecurityIndex.value = index;
				})
				console.log(result.industryId);
				if (result.industryId) {
					console.log(professionData.value);
					professionData.value.forEach((item, index) => {
						console.log(item);
						item.listGrade.some((citem, cindex) => {
							if (citem.id == result.industryId) {
								let childList = professionData.value[index].listGrade.map(
								e => {
									return {
										value: e.id,
										label: e.twoName
									}
								})
								professionArr.value[1] = childList;
								professionIndex.value = [index, cindex];
								return true;
							}
						})
					})
				}
				if (result.physicalGrade) {
					physicalGradeArr.value.forEach((item, index) => {
						result.physicalGrade.split(',').forEach(cItem => {
							if (item.dictValue == cItem) item.checked = true;
						})
					})
				}
			}
		})
	}

	// 真正提交
	const realSumbit = () => {
		//定义表单规则
		let rule = [{
			name: 'postName',
			checkType: 'notnull',
			errorMsg: '请输入岗位名称'
		}, {
			name: 'recruitNum',
			checkType: 'notnull',
			errorMsg: '请输入招聘人数'
		}, {
			name: 'endTime',
			checkType: 'notnull',
			errorMsg: '请选择职位有效期'
		}, {
			name: 'addressInfo',
			checkType: 'notnull',
			errorMsg: '请输入详细地址'
		}, {
			name: 'workInfo',
			checkType: 'notnull',
			errorMsg: '请输入职位介绍'
		}];
		let checkRes = graceChecker.check(form.value, rule);
		if (checkRes) {
			if (isClick.value) {
				isClick.value = false;
			} else {
				return;
			}
			let formParam = Object.assign(form.value, {})
			if (formParam.id) {
				updatePostInfoService(formParam).then(res => {
					if (res.code == 200) {
						timer = setTimeout(() => {
							uni.$emit('updatePost')
							$u.back();
						}, 500)
						$u.msg('操作成功');
					} else {
						$u.msg(res.msg);
						isClick.value = true;
					}
				}).finally(() => {
					isClick.value = true;
				})
			} else {
				savePostInfoService(formParam).then(res => {
					if (res.code == 200) {
						$u.msg('操作成功');
						timer = setTimeout(() => {
							$u.back();
						}, 500)
					} else {
						$u.msg(res.msg);
						isClick.value = true;
					}
				}).finally(() => {
					isClick.value = true;
				})
			}
		} else {
			$u.msg(graceChecker.error);
		}
	}

	// 存为草稿
	const realDraftSumbit = () => {
		//定义表单规则
		let rule = [{
			name: 'postName',
			checkType: 'notnull',
			errorMsg: '请输入岗位名称'
		}, {
			name: 'recruitNum',
			checkType: 'notnull',
			errorMsg: '请输入招聘人数'
		}, {
			name: 'addressInfo',
			checkType: 'notnull',
			errorMsg: '请输入详细地址'
		}, {
			name: 'workInfo',
			checkType: 'notnull',
			errorMsg: '请输入职位介绍'
		}];
		let checkRes = graceChecker.check(form.value, rule);
		if (checkRes) {
			if (isClick.value) {
				isClick.value = false;
			} else {
				return;
			}
			let formParam = Object.assign(form.value, {})
			saveCaoGaoPostInfoService(formParam).then(res => {
				if (res.code == 200) {
					$u.msg('已保存为草稿');
					timer = setTimeout(() => {
						$u.back();
					}, 500)
				} else {
					$u.msg(res.msg);
				}
			}).finally(() => {
				isClick.value = true;
			})
		} else {
			$u.msg(graceChecker.error);
		}
	}
</script>

<style lang="scss">
	.warp {
		box-sizing: border-box;
		position: relative;
	}

	.card {
		box-sizing: border-box;
		padding: 20rpx 64rpx 0rpx 40rpx;

		.tool {
			position: relative;
			right: -40rpx;

			.bai-icons {
				color: #167C3A;
			}
		}
	}

	.title-img {
		padding: 20rpx 0;
	}

	.tx_image {
		width: 115rpx;
		height: 115rpx;
	}

	.row {
		padding: 24rpx 0;
		border-bottom: 1rpx solid #EBEBEB;
	}

	.val_input {
		text-align: right;
	}

	.zw_10 {
		width: 100%;
		height: 10rpx;
		background: #f8f9fd;
	}

	.border {
		position: relative;
		border-radius: 14rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		border: 1rpx solid rgba(64, 114, 254, 0.35);
		margin-bottom: 30rpx;

		.del {
			position: absolute;
			right: -46rpx;
			top: 50%;
			transform: translateY(-50%);
			color: #4072FE;
		}
	}

	.btn_warp {
		width: 750rpx;
		height: 89rpx;

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			width: 50%;
			background: linear-gradient(180deg, #4072FE 0%, #0034C7 100%);
			font-size: 26rpx;

			&.line_right {
				position: relative;

				&::after {
					content: '';
					position: absolute;
					right: 0;
					height: 89rpx;
					width: 1rpx;
					background-color: #CCCCCC;
				}
			}
		}
	}

	.textarea_box {
		box-sizing: border-box;
		padding: 24rpx 10rpx;
		position: relative;

		.max_len {
			position: absolute;
			right: 10rpx;
			bottom: 10rpx;
		}
	}

	.btn_warp {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9;
	}
</style>